<template>
  <div class="service-page">
    <!-- 顶部服务信息 -->
    <div class="header">
      <div class="header-content">
        <h1>陪护陪诊 专业、高效、规范</h1>
        <!-- <div class="price">超值价：<span class="highlight">¥{{ serviceInfo.halfRrice }}</span>/次</div> -->
        <div class="price">
          超值价：
          <span class="highlight">¥{{ halfRrice }}</span>
          /次
        </div>
        <p class="service-tag">{{ serviceInfo.categoryPeople }}</p>
      </div>
    </div>

    <!-- 选项卡导航 -->
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', { active: currentTab === index }]"
        @click="currentTab = index">
        {{ tab }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div v-if="currentTab === 0" class="tab-content">
        <view class="tag-container">
          <text class="tag-text">医家养陪护陪诊 助您就医无忧</text>
        </view>
        <div
          class="service-sections"
          v-for="(item, index) in nurseVisitList"
          :key="index">
          <div class="section" style="margin-top: 20px">
            <!-- <i class="icon icon-consult"></i> -->
            <view class="tag-container-title">
              <text class="tag-text-title">{{ item.name }}</text>
            </view>
            <ul>
              <li
                v-for="(text, idx) in item.value
                  .split('。')
                  .filter((t) => t.trim())"
                :key="idx"
                style="color: #333333; font-size: 14px; line-height: 24px">
                {{ text }}。
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 其他tab内容可根据需要添加 -->
      <div v-if="currentTab === 1" class="tab-content">
        <ul class="explanation-list">
          <li
            v-for="(item, index) in explanationList"
            :key="index"
            class="list-item">
            <!-- <div class="number-circle">{{ item.number }}</div> -->
            <div class="content-wrapper">
              <view class="gradient-bg">
                <!-- 你的内容（文字/图标等） -->
                <text class="text">{{ item.sectionTitle }}</text>
              </view>
              <view style="margin: 15px 0">
                <text class="detail-text">{{ item.detail }}</text>
              </view>
              <!-- <p class="section-title">{{ item.sectionTitle }}</p> -->
            </div>
          </li>
        </ul>
      </div>
      <div v-if="currentTab === 2" class="tab-content">
        <view class="gradient-bg-title">
          <!-- 你的内容（文字/图标等） -->
          <text class="text">预 定 须 知</text>
        </view>

        <ul class="explanation-list">
          <li
            v-for="(item, index) in noticeList"
            :key="index"
            class="list-item">
            <div class="content-wrapper">
              <view class="gradient-bg" style="margin: 15px 0">
                <!-- <div class="number-circle">{{ item.number }}</div> -->
                <!-- 你的内容（文字/图标等） -->
                <text class="text">{{ item.sectionTitle }}</text>
              </view>
              <view style="margin-top: 15px; margin-bottom: 15px">
                <text class="detail-text">{{ item.detail }}</text>
              </view>
              <!-- <p class="section-title">{{ item.sectionTitle }}</p> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部操作 -->

    <div class="footer-actions">
      <button class="contact-btn" open-type="contact">联系客服</button>
      <button class="buy-btn" @click="onItemClick(serverId)">立即购买</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PageInfo from "../../utils/pageutils.js";
import cnMoney from "../../components/cn-money/cn-money";
import * as wxPay from "../../common/api/wxPay.js";
import {
  getNurseServe,
  saveOrder,
  getServiceById,
  couponList,
} from "../../common/api/index.js";
import {
  subscribeMessage,
  calculateDaysBetweenTimestamps,
} from "../../utils/index.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {
    cnMoney,
  },
  data() {
    return {
      halfRrice: "",
      hospitalName: "",
      serviceInfo: {},
      currentTab: 0,
      serverId: "",
      gridList: [],
      nurseVisitList: [],
      tabs: ["基本信息", "价格说明", "预定须知"],
      explanationList: [
        {
          number: "1",
          sectionTitle: "费用构成",
          detail:
            "1、以上费用为护工服务的基础费用，其中，24小时套餐按自然日计算；12小时与4小时套餐，均在白天时段内提供相应时长服务。",
        },
        {
          number: "2",
          sectionTitle: "不包含费用",
          detail:
            "2、此价格不包含患者本人的医疗费用、药品费、营养品费、住院膳食费及其他个人消费。",
        },
        // {
        //   number: "3",
        //   sectionTitle: "服务时长",
        //   detail:
        //     "3、一对一服务以 24 小时/班为单位。护工正常工作时间为当日上岗起，连续服务 24 小时，期间应保证必要的休息。",
        // },
        {
          number: "3",
          sectionTitle: "加班费用",
          detail:
            "3、若因特殊情况需要护工超时服务，不足 3 小时按半天费用计算，超过 6 小时按全天费用计算。具体需提前与护工协商并经平台确认。",
        },
        {
          number: "4",
          sectionTitle: "价格调整",
          detail:
            "4、我们保留在特殊时期（如法定节假日）根据市场情况调整价格的权利，调整前会提前公示或告知。",
        },
        {
          number: "5",
          sectionTitle: "订单确认",
          detail:
            "5、下单支付后，我们将第一时间为您匹配符合条件的护工，待护工确认接单后，服务合同正式生效",
        },
      ],
      noticeList: [
        {
          sectionTitle: "下单前须知",
          detail:
            "1、信息真实准确：请您务必如实、详细地填写患者的病情诊断、自理能力（参考护理级别定义）、过敏史、特殊习惯及主要照护需求。信息不实可能导致服务不匹配，护工有权在发现后终止服务，已产生的费用不予退还。\n2. 服务范围确认：我们的护工提供的是生活照料与协助，不执行任何医疗操作（如注射、输液、伤口换药、鼻饲等）。医疗相关事宜必须由医院医护人员处理。\n3. 沟通与期待：请指定一名家属作为主要联系人，确保沟通顺畅。护工是专业照护者，并非“万能工”，请给予其基本的尊重与信任。\n4. 必备物品准备：请提前为患者备齐生活用品，如纸尿裤、隔尿垫、湿巾、洗漱用品等。如需护工代为采购，相关费用需由您承担。",
        },
        {
          sectionTitle: "服务中须知",
          detail:
            "1、对于24小时服务，请为护工提供必要的休息条件（如一把椅子或折叠床），并理解其需要合理的分段休息以保持精力。\n2、请妥善保管贵重物品及钱财，切勿交由护工保管。如有财物遗失，请及时沟通，我们协助调查但不承担赔偿责任。\n3、不建议安排其从事职责外的高风险劳动（如单独搬运重物）。\n4、如对服务有任何不满，请优先与护工沟通，或通过小程序、客服电话联系我们协调解决，请勿与护工发生直接冲突。\n5、我们定期进行服务质量回访，您也可以及时反馈问题\n6、对护工不得有任何歧视、侮辱或虐待言行。\n7、严禁护工收取红包、小费或任何形式的私下交易。",
        },
        {
          sectionTitle: "服务变更与取消政策",
          detail:
            "1、24小时前取消可免费改期或全额退款。\n2、6-24小时内取消将扣除订单费用的 30% 作为违约金。\n3、6小时内取消将扣除订单费用的 50% 作为违约金。\n4、服务开始后：按实际服务时长结算费用，余额退还。\n5、若因护工原因无法服务，我们将立即为您协调同级替换护工。\n6、若发现您提供的关键信息严重不实（如患者真实状况与下单级别严重不符），我们有权终止服务，已服务费用不退。\n7、若您对服务严重不满，请立即联系客服，我们核实后将为您更换护工或按实际服务结算。",
        },
        {
          sectionTitle: "隐私与安全",
          detail:
            "1、我们郑重承诺，对您提供的患者病情、家庭住址、联系方式等所有个人信息严格保密，仅用于提供服务之目的，绝不会向任何第三方泄露或用于营销。\n2、我们采用加密技术保护您在小程序上的数据传输与存储安全。\n3、护工在服务过程中可能接触到患者的健康信息，我们要求其遵守职业道德，严禁外泄。同时，未经您允许，护工不得在病房内拍照、录音或录像。",
        },
      ],
      serviceTime: "", //服务时长
      department: "", //服务时长
    };
  },
  onLoad(opt) {
    console.log("接收参数", opt);
    this.halfRrice = opt.amount;
    this.hospitalName = opt.hospitalName;
    this.serviceTime = opt.serviceTime; //服务时长
    this.department = opt.department; //服务
    console.log(this.serviceTime);
    this.token = uni.getStorageSync("App-Token");
    this.serviceType = uni.getStorageSync("selectedCategory");
    if (this.serviceType == "医院陪护") {
      this.billingType = "daily";
      this.showOption = false;
    }
    // 编辑
    if (opt.isUpdate) {
      this.serverId = opt.serverId;
      this.code = opt.code;
      this.isUpdate = opt.isUpdate;
      getNurseServe().then((res) => {
        // 所有数据
        this.allData = res.data.data;
        // 根据项目类型过滤的服务项
        let data = res.data.data.filter((item) => {
          return item.code == this.code;
        })[0].nurseServersList;
        this.$nextTick(() => {
          this.list = data;
        });
      });
      if (this.pageInfo?.chooseOrder) {
        this.patientInfo = this.pageInfo.chooseOrderInfo.nursePatient;
        this.startDay = this.pageInfo.chooseOrderInfo.serverStart;
        this.endDay = this.pageInfo.chooseOrderInfo.serverEnd;
        this.startDay1 = Date.parse(this.startDay);
        this.endDay1 = Date.parse(this.endDay);
        this.serviceInfo.categoryValue =
          this.pageInfo.chooseOrderInfo.serverValueList.join(",");
        this.serviceInfo.categoryPrice =
          this.pageInfo.chooseOrderInfo.serverPrice;
        this.serviceInfo.monthPrice =
          this.pageInfo.chooseOrderInfo.serverMonthPrice;
        this.serviceInfo.categoryObject =
          this.pageInfo.chooseOrderInfo.categoryObject;
        this.serviceInfo.serverValue =
          this.pageInfo.chooseOrderInfo.serverValue;
        this.serviceInfo.specialOfferPrice =
          this.pageInfo.chooseOrderInfo.specialOfferPrice;
        this.computeCount();
        this.editFlag = this.pageInfo.chooseOrder;
        this.orderId = this.pageInfo.chooseOrderInfo.orderId;
        this.orderState = this.pageInfo.chooseOrderInfo.orderState;
        this.serverCycle = this.pageInfo.chooseOrderInfo.serverCycle;
        if (this.orderId) {
          this.showDoc = false;
        }
        this.$nextTick(() => {
          this.radioSelected = this.patientInfo.chooseOrder;
          this.$store.commit("page/setPageInfo", {});
        });
      }
      // 新增
    } else {
      this.serverId = opt.serverId;
      this.code = opt.code;
      this.orderId = "";
      this.serverCycle = "";
      getNurseServe().then((res) => {
        this.allData = res.data.data;
        let data = res.data.data.filter((item) => {
          return item.code == this.code;
        });
        // })[0].nurseServersList;
        this.$nextTick(() => {
          this.list = data;
        });
      });
      getServiceById({ serverId: this.serverId }).then((res) => {
        let data = res.data.data;
        this.serviceInfo = data;
        let value = data.nurseVisitList;
        this.nurseVisitList = data.nurseVisitList;
        console.log(this.nurseVisitList);
        let serverId = this.serverId;
        this.serverId = serverId;
        //   this.getCouponList()
      });
    }
  },
  mounted() {
    this.initServe();
  },
  methods: {
    onItemClick(serverId) {
      let code = "visit";
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/CompanionVisit/CompanionVisit?serviceTime=${this.serviceTime}&code=${code}&serverId=${serverId}&amount=${this.halfRrice}&hospitalName=${this.hospitalName}&department=${this.department}`,
      });
    },
    initServe() {
      getNurseServe().then((res) => {
        let data = res.data.data;
        this.gridList = data;
        // this.itemList = this.gridList[this.current].nurseServersList;
        this.tablist = data.map((item, index) => {
          let disabled = false;
          // if (index == 0) {
          // 	disabled = true
          // } else {
          // 	disabled = false
          // }
          return {
            name: item.title,
            disabled: disabled,
          };
        });
      });
    },
    click(item) {
      console.log("item", item);

      // if (item.index !== 0) {
      // 	this.current = item.index
      // 	this.itemList = this.gridList[this.current].nurseServersList
      // }
      this.current = item.index;
      this.itemList = this.gridList[this.current].nurseServersList;
    },
  },
};
</script>

<style lang="scss" scoped>
.gradient-bg {
  width: 60%;
  height: 50rpx; /* 根据需要调整高度 */
  background: linear-gradient(
    to right,
    #399fc5,
    #cce7f0
  ); /* 左深绿(#006400) → 右浅绿(#00FF00) */
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gradient-bg-title {
  width: 100%;
  height: 60rpx; /* 根据需要调整高度 */
  background: linear-gradient(to right, #399fc5, #399fc5);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-family: "楷体", "KaiTi", "STKaiti", serif;
  font-size: 16px;
  font-weight: bold;
  color: white; /* 白色文字提高对比度 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 可选：文字阴影增强可读性 */
}
.tag-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
}

.tag-text {
  font-family: "楷体", "KaiTi", "STKaiti", serif; /* 设置为黑体 */
  font-size: 18px; /* 稍微放大字体，根据需要调整 */
  font-weight: bold; /* 加粗 */
  color: #3293b7; /* 微信绿色，也可以使用其他绿色值如 #00FF00 */
  text-align: center;
}
.tag-container-title {
  display: flex;
  justify-content: left; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
}

.tag-text-title {
  font-family: "楷体", "KaiTi", "STKaiti", serif; /* 设置为黑体 */
  font-size: 16px; /* 稍微放大字体，根据需要调整 */
  font-weight: bold; /* 加粗 */
  color: #3293b7; /* 微信绿色，也可以使用其他绿色值如 #00FF00 */
  text-align: center;
}
.tag-container-context {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
}

.tag-text-context {
  font-family: "宋体", "SimSun", "STSong", serif; /* 设置为宋体 */
  font-size: 16px; /* 稍微放大字体，根据需要调整 */
  color: #000000; /* 微信绿色，也可以使用其他绿色值如 #00FF00 */
  text-align: center;
}
.service-page {
  font-family: "PingFang SC", sans-serif;
  background-color: #e6f2ff;
  min-height: 100vh;
  padding: 20px;

  .header {
    text-align: center;
    padding: 40px 0;
    background: linear-gradient(to bottom, #ffffff, #e6f2ff);
    border-radius: 10px;
    margin-bottom: 30px;

    h1 {
      color: #2c73d2;
      margin-bottom: 15px;
    }

    .price {
      font-size: 24px;
      color: #ff6b6b;
      margin-bottom: 10px;
    }

    .highlight {
      font-weight: bold;
      font-size: 32px;
    }

    .service-tag {
      color: #666;
      font-size: 16px;
    }
  }

  .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 20px;

    .tab {
      padding: 12px 20px;
      border-radius: 25px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s;

      &.active {
        background: #2c73d2;
        color: white;
        box-shadow: 0 4px 12px rgba(44, 115, 210, 0.3);
      }
    }
  }

  .content {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;

    .section {
      margin-bottom: 15px;
      padding-left: 0px;

      i {
        width: 40px;
        height: 40px;
        background-size: contain;
        display: inline-block;
        margin-right: 15px;
      }

      h3 {
        color: #2c73d2;
        margin: 15px 0;
      }

      ul {
        padding-left: 20px;
        padding-top: 10px;
        li {
          line-height: 1.8;
          color: #666;
        }
      }
    }
  }

  .footer-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;

    button {
      padding: 12px 30px;
      border-radius: 25px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
      }
    }

    .contact-btn {
      // background: white;
      border: 1px solid #2c73d2;
      color: #2c73d2;
    }

    .buy-btn {
      background: #ff6b6b;
      color: white;
      border: none;
    }
  }
}
.price-explanation {
  font-family: "PingFang SC", Microsoft YaHei, sans-serif;
  background-color: #e6f2ff;
  min-height: 100vh;
  padding: 30px;

  .title-container {
    background: linear-gradient(to right, #2c73d2, #1a5bb7);
    border-radius: 10px;
    padding: 25px 30px;
    margin-bottom: 30px;

    .main-title {
      color: #fff;
      font-size: 28px;
      font-weight: 600;
      text-align: center;
      line-height: 1.4;
    }
  }

  .explanation-list {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    .list-item {
      display: flex;
      align-items: flex-start;
      padding: 20px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .number-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ff6b6b;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 18px;
        flex-shrink: 0;
      }

      .content-wrapper {
        flex-grow: 1;

        .section-title {
          color: #333;
          font-size: 18px;
          margin: 0 0 10px;
          font-weight: 500;
        }

        .detail-text {
          color: #666;
          font-size: 16px;
          line-height: 1.8;
          text-align: justify;
        }
      }
    }
  }
}
.notice-container {
  font-family: "PingFang SC", Microsoft YaHei, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border-radius: 12px;

  .header-section {
    background: #2c73d2;
    border-radius: 8px 8px 0 0;
    padding: 20px;
    margin-bottom: 24px;

    .main-title {
      color: #ffffff;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      letter-spacing: 0.5px;
    }
  }

  .content-section {
    padding: 24px 32px 32px;

    .notice-list {
      padding-left: 36px;
      counter-reset: notice-counter;

      .notice-item {
        position: relative;
        margin-bottom: 16px;
        list-style: none;

        .notice-content {
          position: relative;
          display: flex;
          align-items: flex-start;
          margin-top: 15px;
          margin-bottom: 15px;
          .index-number {
            position: absolute;
            left: -36px;
            top: 0;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: #f0f0f0;
            border-radius: 50%;
            font-weight: 500;
            color: #333;
          }

          .notice-text {
            color: #333;
            font-size: 16px;
            line-height: 1.8;
            text-align: justify;
            flex-grow: 1;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .notice-container {
    padding: 16px;

    .header-section {
      padding: 16px;
    }

    .content-section {
      padding: 16px 20px 20px;

      .notice-list {
        padding-left: 28px;

        .notice-item {
          margin-bottom: 12px;

          .notice-content {
            .index-number {
              width: 24px;
              height: 24px;
              line-height: 24px;
              left: -28px;
            }

            .notice-text {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
